<form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form">
  <nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert>
  <nz-form-item style="width: 100%">
    <nz-form-control nzErrorTip="">
      <nz-input-group nzSize="large" [nzAddOnBefore]="usernamePreffixIcon">
        <input nz-input formControlName="userName" placeholder="{{ 'mxk.login.text.username' | i18n }}" style="font-weight: bold" />
      </nz-input-group>
      <ng-template #usernamePreffixIcon>
        <i nz-icon nzType="user" nzTheme="outline"></i>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item style="width: 100%">
    <nz-form-control nzErrorTip="">
      <nz-input-group [nzSuffix]="suffixTemplate" nzSize="large" [nzAddOnBefore]="passwordPreffixIcon">
        <input
          [type]="passwordVisible ? 'text' : 'password'"
          nz-input
          placeholder="{{ 'mxk.login.text.password' | i18n }}"
          formControlName="password"
          style="font-weight: bold"
        />
      </nz-input-group>
      <ng-template #passwordPreffixIcon>
        <i nz-icon nzType="key" nzTheme="outline" style="color: #ffd700"></i>
      </ng-template>
      <ng-template #suffixTemplate>
        <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item style="width: 100%">
    <nz-form-control nzErrorTip="">
      <nz-input-group nzSearch nzSize="large" [nzAddOnBefore]="captchaPreffixIcon" nzSearch [nzAddOnAfter]="suffixImageCaptchaButton">
        <input
          style="font-weight: bold"
          type="text"
          formControlName="captcha"
          nz-input
          placeholder="{{ 'mxk.login.text.captcha' | i18n }}"
        />
      </nz-input-group>
      <ng-template #captchaPreffixIcon>
        <i nz-icon nzType="lock" nzTheme="outline"></i>
      </ng-template>
      <ng-template #suffixImageCaptchaButton>
        <img src="{{ imageCaptcha }}" (click)="getImageCaptcha()" />
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <button nz-button type="submit" nzType="primary" nzSize="large" [nzLoading]="loading" nzBlock>
      {{ 'app.login.login' | i18n }}
    </button>
  </nz-form-item>
</form>
